<template>
    <nly-content-wrapper>
        <nly-content-header style="padding:0;"></nly-content-header>
        <div style="height:calc(100% - 60px)">
            <div class="innerMenu">
                <nly-col col-class="col-sm-auto" class="title-menu">
                    <!-- <div class="innermenu-title">项目</div> -->
                    <!-- 动态加载菜单 -->
                    <ant-menu :menus="menus" mode="horizontal" theme="light" menuStyle="width:auto;" />
                </nly-col>
                <nly-col style="width:100%;height:calc(100% - 60px);overflow-y: auto;" class="right-col">
                    <keep-alive>
                        <router-view />
                    </keep-alive>
                </nly-col>
            </div>
        </div>

    </nly-content-wrapper>

</template>

<script>
import { AntMenu } from "@/components/AntMenu";

export default {
    name: "InnerMenu",
    components: {
        AntMenu
    },
    data () {
        return {

        }
    },
    computed: {
        menus: function () {
            console.log("getChildrenMenus", this.$store.getters.addRouters);
            var routes = {
                children: this.$store.getters.addRouters
            };

            var route = this.$route.matched;
            console.log("客户设置路由.matched", this.$route.matched)
            for (var i = 0; i < route.length; i++) {
                let find = routes.children.find((e) => (e.name == route[i].name));
                if (find.meta.menuType == 3) {
                    break;
                }
                routes = find;
            }
            let result = new Array();
            routes.children && routes.children.map && routes.children.map((item) => {
                result.push({
                    id: item.meta.id,
                    ...item,
                    name: item.meta.name
                })
            });
            console.log("内部菜单：", result)

            return result;
        }

    },
}
</script>
<style lang="less" scoped>
    ::v-deep {
        .innerMenu {
            border: 1px solid #bbb;
            margin: 10px;
            height: 100%;
            .ant-menu-submenu-inline
                > .ant-menu-submenu-title
                .ant-menu-submenu-arrow {
                right: 5px !important;
            }
            .title-menu {
                width: 100%;
                padding: 0px;
                text-align: left;
                margin-bottom: 10px;
            }
        }
        .customizeSet,
        .content-wrapper {
            margin: 0 !important;
            // display: flex;
            // flex-direction: column;
            // flex-grow: 1;
        }
        .ant-menu-light .ant-menu-submenu-title {
            color: #1890ff;
            padding-right: 20px !important;
        }
        .btn-gp {
            display: block !important;
            text-align: left;
        }
        .ant-menu-horizontal,
        .ant-menu-inline {
            .ant-menu-item {
                line-height: 46px !important;
                a {
                    color: #555;
                    font-weight: bold;
                }
            }
        }
        .ant-table-wrapper .ant-table-placeholder {
            position: absolute !important;
            top: 44px;
            // width: calc(100% - calc(1.2rem + 1px));
            width: 100%;
        }
        .innermenu-title {
            padding-left: 7px;
            margin-top: 6px;
            margin-bottom: 7px;
            font-size: 25px !important;
        }
    }
</style>

